<template>
 <div>
    <Scroll v-if="data.length" :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
        <Row :gutter="8" type="flex">
            <template v-for="(item,index) in data">
                <Col :key="item.id">
                    <cardvideo @videodel="videodel" :data="item" :index="index"/>
                </Col>
            </template>
        </Row>
        <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
    </Scroll>
    <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
 </div>
</template>
<script>
    import { materialvideovideolist } from '@/api/sourcematerial.js'
    import cardvideo from './cardvideo.vue'
    import { rbacmenumenuclick  } from '@api/menuclick';
    export default {
        props: {
            remark: String
        },
        components: { cardvideo },
        data () {
            return {
                height:null,
                data:[],
                Message: false,
                params: { remark: '', page: 1, pageSize: 24 },
            }
        },
        mounted () {
            this.height = document.documentElement.clientHeight - 320
        },
        methods: {
            initial() {
                this.params.page = 1
                this.askData()
                this.rbacmenumenuclick()
            },
            rbacmenumenuclick(){
                let params={
                    menu_name:'素材库',
                    module_name:'视频'
                }
                rbacmenumenuclick(params).then(() => {}).catch(() => {})
            },
            askData() {
                this.Message = false
                materialvideovideolist(this.params).then(res=>{
                    this.data = res.list
                    this.log(res)
                })
            },
            askDatas() {
                materialvideovideolist(this.params).then(res=>{
                    this.data.push(...res.list)
                })
            },
            handleReachBottom() {
                if (this.total > this.params.pageSize * this.params.page) {
                    this.params.page++
                    this.askDatas()
                } else {
                    this.Message = true
                }
            },
            videodel(index) {
                this.data.splice(index, 1)
            }
        }
    }
</script>
